<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>项目执行明细</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../lib/pagination/style/pagination.css"/>
    <script src="/js/common/language.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery-1.9.1.js"></script>
    <link href="/lib/budget/styles.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="/css/budget/viewReport.css"/>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/Highcharts-5.0.14/code/highcharts.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/data.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/drilldown.js"></script>
    <style>
        .clearfix{
            padding-top: 44px;
            margin-top:0px;
        }
        input[type="text"]{
            width:120px;
            height:24px;
            border-radius:6px ;
            border: 1px solid rgb(221, 221, 221);
            outline: none;
            line-height:24px;
            padding-left:2px;
        }
        .sj{
            top: 10px;
            right: 9px;
        }
        table{
            width: 80%;
            margin:0 auto;
        }
        #ulList{
            display: none;
            position: absolute;
            left: 0px;
            top: 24px;
            border: 1px solid #eee;
            background: #fff;
            z-index: 10;
            width: 600px;
            height: 400px;
            overflow: scroll;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
            text-decoration: none;
            color: #000000;
        }
        .checkbox_btn{
            left:214px;
        }
        #query{

            width: 52px;
            height: 24px;
            font-family: 'Arial Normal', 'Arial';
            font-style: normal;
            font-size: 13px;
            color: #fff;
            background: #2b7edf url(../../img/taisousuo.png) no-repeat 12px 5px;
            border: none;
            padding-left: 20px;
            border-radius: 5px;
            display: inline-block;
            text-align: center;
            line-height: 24px;
        }
        .check{
            width: 52px;
            height: 24px;
            font-family: 'Arial Normal', 'Arial';
            font-style: normal;
            font-size: 13px;
            color: #fff;
            border: none;
            padding: 0px 14px;
            border-radius: 5px;
            display: inline-block;
            background: #2b7fe0;
            text-align: center;
            line-height: 24px;
        }
        #year{
            height:24px;
            border-radius: 6px;
        }
        #container{
            width:100%;
            min-height:calc(100% - 150px);
        }
        .detail{
            color: #2b7edf;
            text-decoration: none;
        }
        .clearfix{
            padding-top:0px;
        }
        .th, td{
            padding: 10px 2px;
        }
        td:nth-child(2){
            text-overflow: clip;
            white-space: normal;
            line-height: 20px;
            word-wrap: break-word;

        }
    </style>
</head>
<body>
<%--<div class="head w">--%>
    <%--<ul class="index_head">--%>
        <%--<li data-num="0"><span class="headli1_1 " id="waitwork">预算执行报表</span><img class="headli1_2" src="../../img/twoth.png" alt="">--%>
        <%--</li>--%>
        <%--<li data-num="1"><span class="headli2_1 endWork" id="endWork">年度预算执行报表</span><img src="../../img/twoth.png" alt="" class="headli2_2">--%>
        <%--</li>--%>
        <%--<li data-num="2"><span class="headli2_1 endWork" id="tongji">预算执行报表统计</span><img src="../../img/twoth.png" alt="" class="headli2_2">--%>
        <%--</li>--%>
        <%--<li data-num="3"><span class="headli3 one" id="yusuan">项目预算统计</span><img src="../../img/twoth.png" alt="" class="headli2_2"></li>--%>
        <%--<li data-num="4"><span class="headli3" id="mingxi">项目明细统计</span><img src="../../img/twoth.png" alt="" class="headli2_2"></li>--%>
    <%--</ul>--%>
<%--</div>--%>
<div class="clearfix">
    <div class="div_Img">
        <img src="/img/yszxbb.png" style="margin-top: 25px;margin-left: 15px;vertical-align: middle;" alt="菜单主分类设置">
    </div>
    <p class="p1">项目执行明细</p>
</div>

<div id="content" >
    <table id="itemTable">
        <thead>
        <tr>
            <th class="" style="width:8%">流水号</th>
            <th class="" style="width:25%">流程名称</th>
            <th class="" style="width:12%">申请时间</th>
            <th class="">本次支出额度</th>
            <th class="">剩余余额</th>
            <th class="">执行人</th>
            <th class="">执行部门</th>
            <th class="">状态</th>
            <th class="">操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div style="margin: -25px auto 0px;height:50px;width: 97%;" class="clearfix">
        <div id="dbgz_page" class="M-box3">
        </div>
    </div>
</div>
</body>
<script>
    var budgetId=  $.GetRequest().budgetId;
    function undefindData(data) {
        if (data == undefined) {
            return '';
        } else {
            return data;
        }
    }

    function undefinedData(data) {
        if(data == undefined){
            return '';
        }else {
            return data;
        }
    }
    var ajaxPageTwo={
        data:{
            page:1,//当前处于第几页
            pageSize:5,//一页显示几条
            useFlag:true,
            budgetId:budgetId
        },
        page:function () {
            var me=this;
            $.post('/budget/selBudgetingProcessByItem',me.data,function (json) {
                var str='';
                var arr=json.datas;
//                    console.log(arr)
                for(var i=0;i<arr.length;i++){
                    str+= '<tr budgetId="'+arr[i].budgetId+'" flowId="'+arr[i].flowId+'" runId="'+arr[i].runId+'">'+
                        '<td title="'+undefinedData(arr[i].runId)+'">'+undefinedData(arr[i].runId)+'</td>'+

                        '<td title="'+undefinedData(arr[i].runName)+'"><a href="javascript:;" class="detail">'+undefinedData(arr[i].runName)+'</a></td>'+
                        '<td title="'+undefinedData(arr[i].applicationDate)+'">'+undefinedData(arr[i].applicationDate)+'</td>'+
                        '<td title="'+undefinedData(arr[i].actualExpenditure)+'">'+undefinedData(arr[i].actualExpenditure)+'</td>'+
                        '<td title="'+undefinedData(arr[i].isPayment)+'">'+undefinedData(arr[i].isPayment)+'</td>'+
                        '<td title="'+undefinedData(arr[i].createrName)+'">'+undefinedData(arr[i].createrName)+'</td>'+
                        '<td title="'+undefinedData(arr[i].deptName)+'">'+undefinedData(arr[i].deptName)+'</td>'+
                        '<td title="'+undefinedData(arr[i].setpName)+'">'+undefinedData(arr[i].setpName)+'</td>'+
                        '<td><a href="javascript:;" class="detail">查看详情</a></td>'+
                        '</tr>'
                }
//                $('table').append(str)
                $('#itemTable  tbody').html(str)
                me.pageTwo(json.totleNum,me.data.pageSize,me.data.page)
            },'json')
        },
        pageTwo:function (totalData, pageSize,indexs) {
            var mes=this;
            $('#dbgz_paged').pagination({
                totalData: totalData,
                showData: pageSize,
                prevContent:'上一页',
                nextContent:'下一页',
                jump: true,
                coping: true,
                homePage:'',
                endPage: '',
                current:indexs||1,
                callback: function (index) {
                    mes.data.page=index.getCurrent();
                    mes.page();
                }
            });
        }
    }
    ajaxPageTwo.page();
    $('#itemTable').on('click','.detail',function(){
        var  flowId = $(this).parents('tr').attr('flowId')
        var  runId = $(this).parents('tr').attr('runId')
        window.open('/workflow/work/workformPreView?flowId='+flowId+'&tableName=budget&runId='+runId)
    })






</script>

</html>
